<template>
  <div class="boss">
    <head-page
      :title="`${title}`"
      backUrl="/my"
      style="border-bottom: 2px solid #dad9df"
    >
      <img src="../../assets/black_dian.png" alt="" />
    </head-page>
    <!-- <p>{{ list.mineText }}</p> -->
    <div class="bottom">
      <div class="center">
        <!-- 标题区域 -->
        <div class="umit">
          <div
            class="xiao"
            v-for="(item, index) in txt"
            :key="index"
            @click="marketing(item, index)"
          >
            <div class="left">
              <div
                class="yuan"
                :class="['zhong', index == curr ? 'backactive' : '']"
              ></div>
            </div>
            <div
              class="zhong"
              :class="['zhong', index == curr ? 'active' : '']"
            >
              {{ item.father }}
            </div>
          </div>
        </div>
        <!-- 视频图片区域 -->
        <van-list
          v-if="picture"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div class="video">
            <div
              class="le"
              v-for="(item, index) in imgurl"
              :key="index"
              @click="markevideo(item, title)"
            >
              <img :src="getImgUrl(item.marketingVideoPic)" alt="" />
              <h4>{{ item.marketingVideoTitle }}</h4>
            </div>
          </div>
        </van-list>
        <!-- 图文内容区域 -->
        <div class="context" v-else>
          <div
            class="small"
            v-for="(item, index) in list"
            :key="index"
            @click="textdetail(title, index + 1, item)"
          >
            <!-- 原点区域 -->
            <div class="leftnum">{{ index + 1 }}.</div>
            <!-- 内容区域 -->
            <div class="right">
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Head from "@/components/public/HeadPage.vue";
import { videolist, getMineDetail } from "@/api/index";
export default {
  data() {
    return {
      title: this.$route.query.i,
      list: [],
      Num: 0, //页码
      Size: 10, //条数
      loading: false,
      finished: false,
      txt: [],
      id: "", //视频资料的id
      titletext: [],
      picture: false, //视频资料内容隐藏
      curr: 0, //标题变色
      imgurl: "", //视频
    };
  },
  components: {
    Head,
  },
  methods: {
    //视频地址拼接
    getImgUrl(img) {
      return this.montageImgUrl(img);
    },
    //标题跳转
    marketing(item, index) {
      this.curr = index;

        if (item.father.slice(0,2) == "视频") {
          this.picture = true;
        } else {
          this.picture = false;
          this.list = this.txt[index].list;
        }
     

      // if (item.father == "视频") {
      // 	this.picture = true
      // } else {
      // 	this.picture = false
      // 	this.list = this.txt[index].list
      // }
    },
    //图文资料内容跳转
    textdetail(title, text, item) {
      this.$router.push({
        path: "/coffeedetails",
        query: {
          title,
          text,
          context: item.name,
          ID: item.id,
        },
      });
    },
    // 视频区域
    markevideo(i, title) {
      this.$router.push({
        path: "/markvideo",
        query: {
          imgid: i.marketingVideoId,
          videourl: i.marketingVideo,
          title,
        },
      });
    },
    onLoad() {
      this.loading = true;

      if (this.finished) {
        return;
      }
      videolist({
        pageNum: this.Num + 1,
      })
        .then((res) => {
          if (res.data.code == 200) {
            // 加载状态结束
            this.loading = false;
            this.imgurl = [...this.imgurl, ...res.data.rows];

            // 数据全部加载完成
            if (this.imgurl.length >= res.data.total) {
              this.finished = true;
            }
          }
        })
        .catch((err) => {
          console.log("商品列表获取失败err", err);
        });
    },
  },
  mounted() {
    //点击标题查看详情
    // mainTitle({ mineTitle: this.$route.query.i }).then((res) => {
    // 	if (res.data.code == 200) {
    // 		console.log(res.data.data);
    // 		this.list = res.data.data
    // 	}
    // }),
    //获取营销标题
    getMineDetail({
      Id: this.$route.query.id,
    }).then((res) => {
      if (res.data.code == 200) {
        this.txt = res.data.data;
        this.list = res.data.data[0].list;

        this.titletext = res.data.data[1].list;
        this.id = res.data.data[1].list[0].id;
        this.marketing(this.txt[0], 0);
      }
    });
  },
};
</script>

<style scoped>
.boss {
  width: 100%;
  height: 6rem;
}
.top h3 img {
  width: 0.2rem;
  margin-right: 0.05rem;
}
.bottom {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}
.center {
  width: 98%;
  height: 100%;
}
.umit {
  width: 100%;
  min-height: 0.4rem;
}
.xiao {
  width: 100%;
  display: flex;
}
/* 左边区域 */
.xiao .left {
  width: 5%;
  margin-right: 0.07rem;
}
.yuan {
  width: 0.18rem;
  height: 0.18rem;
  border-radius: 50%;
  background-color: black;
  margin-top: 0.06rem;
}
/* 中间区域 */
.zhong {
  line-height: 0.32rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
/* 内容区域 */
.context {
  width: 100%;
  min-height: 1rem;
}
.small {
  width: 100%;
  height: 0.2rem;
  display: flex;
  margin-top: 0.03rem;
  margin-bottom: 0.07rem;
}
/* 原点区域 */
.left {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  padding-top: 0.01rem;
}
.leftnum {
  font-weight: 700;
  padding-top: 0.03rem;
}
/* 内容区域 */
.right {
  width: 94%;
  height: 100%;
  padding-left: 0.05rem;
  font-weight: 700;
}
/* 视频区域 */
.video {
  width: 100%;
  min-height: 2rem;
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 0.55rem;
  background-color: #f0eff5;
  overflow-y: scroll;
}

/* 左边区域 */
.le {
  /* width: 48%;
    flex-shrink: 0;
	margin: .02rem ;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: .1rem;
	border: 1px solid black; */

  width: 46%;
  height: 1.9rem;
  flex-shrink: 0;
  margin: 0.07rem;
  border-radius: 0.1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: white;
}
.le img {
  /* width: 1.75rem;
	min-height:1.5rem;
	border-radius: .1rem; */
  width: 96%;
  height: 1.6rem;
}
.zho {
  padding-left: 0.1rem;
  line-height: 0.27rem;
  font-weight: 700;
}
</style>